<template>
    <view class="conatiner" :style="{
        color,
        backgroundColor,
        textAlign,
        fontSize
    }">
        {{title}}
    </view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';

const data = inject<any>('data')

const title = computed(()=>{
    return data.title
})

const color = computed(()=>{
    return data.style.textColor
})

const backgroundColor = computed(()=>{
    return data.style.backgroundColor || ''
})

const textAlign = computed((): any=>{
    let index: number = data.style.textPosition || 0
    return ['left', 'center', 'right'][index]
})

const fontSize = computed(()=>{
    return data.style.textSize + 'rpx'
})

</script>

<style lang="scss" scoped>
    .conatiner {
        padding: 40rpx 30rpx 40rpx 30rpx;
        font-weight: bold;
    }
</style>
